<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>album管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <!-- 上传图片框样式，不使用上传组件可以删除此样式 -->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 70px;
            line-height: 150px;
            text-align: center;
        }

        .avatar {
            width: 150px;
            height: 70px;
            display: block;
        }

    </style>

    <!--图片布局-->
    <style>
        #box ul {
            display: flex;
            flex-wrap: wrap;
        }

        #box li {
            padding: 3px;
            list-style: none;
            margin-right: 15px;
            border: 1px solid #eee;
        }

        #box img {
            width: 200px;
            height: 150px;
        }


    </style>


</head>
<body class="hold-transition">
<div id="app">

    <div class="content-header">
        <h1>管理
            <small>album管理</small>
        </h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
            <el-breadcrumb-item>album管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <!--查询表单-->
                <el-form :inline="true">

                    <el-button type="primary" class="butT" @click="formVisible=true;pojo={}">图片上传</el-button>
                    <el-button type="primary" class="butT"><i class="el-icon-delete-solid"></i></el-button>

                </el-form>


            </div>

            <!-- <el-table :data="imageItems" border style="width: 100%">


            &lt;!&ndash;     &lt;!&ndash;<el-table-column label="相册" width="200">&ndash;&gt;
                 <el-table-column width="200">
                     <template slot-scope="scope">
                         <img :src="scope.row.url" width="160" height="160">
                     </template>
                 </el-table-column>&ndash;&gt;


                 <el-table-column
                         label="操作">
                     <template slot-scope="scope">

                         <el-button @click="dele(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>-->

            <!--图片显示列表-->
            <div class="" id="box">
                <ul>

                   <!-- <li v-for="v in imageItems">-->
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="v in imageItems" :label="v.url"  :key="v.url">
                                <img :src="v.url" alt="">
                            </el-checkbox>
                        </el-checkbox-group>
                   <!-- </li>-->


                </ul>
            </div>


            <div class="add-form">
                <!--弹出窗口-->
                <el-dialog title="编辑" :visible.sync="formVisible">
                    <el-form label-width="80px">


                        <!-- 图片上传代码 如页面有图片上传功能放开注释 ****   -->
                        <el-form-item label="图片">
                            <el-upload
                                    action="/upload/native.do"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-success="updateImage"
                                    :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <el-dialog :visible.sync="dialogVisible">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                        </el-form-item>


                        <el-form-item>
                            <el-button type="primary" @click="save()">保存</el-button>
                            <el-button @click="formVisible = false">关闭</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>

        </div>
    </div>


</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/util.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                checkList: [],
                currentPage: 1,
                total: 10,
                size: 10,
                searchMap: {},
                pojo: {},
                formVisible: false,
                imageUrl: '',
                id: 0,
                imageItems: [], //图片列表
                srcList: [],

                dialogImageUrl: '',
                dialogVisible: false,

                ImageUrls: [],   //存储批量上传图片
            }
        },

        created() {
            this.id = getQueryString("id");

            this.fetchData();
        },
        methods: {
            fetchData() {
                axios.get(`/album/findById.do?id=${this.id}`).then(response => {
                    let images = response.data.imageItems;
                    let a = JSON.parse(images);

                    for (var i = 0; i < a.length; i++) {

                        this.imageItems.push(a[i]);
                        this.srcList.push(a[i].url);
                        /*  0:
                              status: (...)
                              uid: (...)
                              url: "http://localhost:9101/img/1.jpg"*/
                    }
                });
            },
            save() {
                //{"索引1":{"url":"http://localhost:9101/img/1.jpg"},"索引2":{"url":"http://localhost:9101/img/7.jpg"}}

                axios.post(`/album/addMany.do?id=${this.id}`, this.ImageUrls).then(response => {
                    this.fetchData(); //刷新列表
                    this.formVisible = false;//关闭窗口
                });
            },
            edit(id) {
                this.formVisible = true // 打开窗口
                // 调用查询
                axios.get(`/album/findById.do?id=${id}`).then(response => {
                    this.pojo = response.data;
                    this.imageUrl = this.pojo.image //显示图片  如页面有图片上传功能放开注释
                })
            },
            dele(id) {
                this.$confirm('确定要删除此记录吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get(`/album/delete.do?id=${id}`).then(response => {
                        this.fetchData(); //刷新列表
                    })
                })
            },
            //查询图片列表
            list(id) {
                location.href = `album_list.html?id=${id}`;
            },
            /* ****图片上传相关代码  如页面有图片上传功能放开注释 *****/
            /* handleAvatarSuccess(res, file) {
                 this.imageUrl = file.response;
             },
             beforeAvatarUpload(file) {
                 const isJPG = file.type === 'image/jpeg';
                 const isLt2M = file.size / 1024 / 1024 < 2;

                 if (!isJPG) {
                     this.$message.error('上传头像图片只能是 JPG 格式!');
                 }
                 if (!isLt2M) {
                     this.$message.error('上传头像图片大小不能超过 2MB!');
                 }
                 return isJPG && isLt2M;
             },*/


            //批量上传
            handleRemove(file, fileList) {
                console.log("++++++++++++++++++++");
                console.log(file, fileList);
                console.log("----------------------");
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.ImageUrls.url = this.dialogImageUrl;
                // this.ImageUrls.push(this.dialogImageUrl);
                this.dialogVisible = true;
            },
            updateImage(response, file, fileList) {
                console.log("++++++++++++++++++++");
                console.log(response, file, fileList)
                this.ImageUrls = fileList;
                console.log("----------------------");
                console.log(this.ImageUrls)
            },

            change(){
                console.log(this.checkList);
            }
        }
    })
</script>
</html>
